<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加和删除</title>
	</head>
	<body>
		<table id="mytable" border="1"></table>
		<script>
			let table=document.getElementById("mytable");
			let thead=document.createElement("thead");
			let caption=document.createElement("caption");
			table.appendChild(caption);
			caption.innerHTML=`
			产品名：<Input id="product"><br/>
			&nbsp价&nbsp格&nbsp:<input id="price"><br/>
			&nbsp投&nbsp票&nbsp:<input id="rating">
			<button style='background-color: aquamarine;' onclick='add()'>添加</button>`;
			table.appendChild(thead);
			let tr=document.createElement("tr");
			thead.appendChild(tr);
			let th=document.createElement("th");
			tr.appendChild(th);
			th.innerText="id";
		    th=document.createElement("th");
			tr.appendChild(th);
			th.innerText="Product";
			th=document.createElement("th");
			tr.appendChild(th);
			th.innerText="Price";
			th=document.createElement("th");
			tr.appendChild(th);
			th.innerText="Rating";
			th=document.createElement("th");
			tr.appendChild(th);
			th.innerText="操作";
			let tbody=document.createElement("tbody");
			table.appendChild(tbody);
			let arrIds=[1,2,3,4,5];
			let arrProducts=new Array();
			arrProducts.splice(0,0,"Vitae Quam Lorem");
			arrProducts.splice(1,0,"In Tempus Velit ");
			arrProducts.splice(2,0,"Lorem Ipsum Dolor Sat");
			arrProducts.splice(3,0,"Quis Felis Fringilla");
			arrProducts.splice(4,0,"Nunc Sem Pharetra");
			let arrPrices=new Array();
			arrPrices.splice(0,0,"$5");
			arrPrices[1]="$54";
			arrPrices[2]="$665";
			arrPrices[3]="$45";
			arrPrices[4]="$78";
			let arrRating=new Array();
			arrRating[0]="⭐⭐⭐⭐";
			arrRating[1]="⭐⭐⭐";
			arrRating[2]="⭐⭐";
			arrRating[3]="⭐⭐⭐⭐⭐⭐";
			arrRating[4]="⭐";
			let len=arrProducts.length;
			reflash();
			function reflash(){
				
			for (let i=0;i<len;i++) {
				if (arrIds[i]!==undefined) {
					
				tr=document.createElement("tr");
				tbody.appendChild(tr);
				let td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=arrIds[i];
				
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=arrProducts[i];
				
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=arrPrices[i];
				
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=arrRating[i];
				
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerHTML="<button onclick='btnclick("+i+")'>删除</button>";
				console.log(arrIds[i]);
				}
			}
			}
			function btnclick(i){
				arrIds.splice(i,1);
				arrProducts.splice(i,1);
				arrPrices.splice(i,1);
				arrRating.splice(i,1);
				tbody.remove();
				tbody=document.createElement("tbody");
				table.appendChild(tbody);
				reflash();
			}
			function add(){
				let product=document.getElementById("product").value();
				let price=document.getElementById("price").value();
				let rating=document.getElementById("rating").value();
				if (product!=""&&price!=""&&rating!="") {
					arrProducts.push(product);
					arrPrices.push(price);
					arrRating.push(rating);
					tbody.remove();
					tbody=document.createElement("tbody");
					table.appendChild(tbody);
					reflash();
				}else{
					alert("输入不能为空");
				}
			}
		</script>
	</body>
</html>
